import React from 'react'
import { useNavigate } from 'react-router-dom'
import img from './img/image.png'
import styles from './index.module.css'
import Nabar from '../../conpoment/Nabar'

const Index: React.FC = () => {
  const navigate = useNavigate()

  // 模拟数据
  const paymentData = {
    registrationNo: '20200101001598Z',
    patientName: '王小柯',
    department: '门诊外一科',
    doctor: '刘医师',
    orderTime: '2020-01-01 10:20:36',
    totalAmount: 520.13,
    prescriptionNo: '20200101032',
    pharmacyInfo: '请前往一楼门诊药房2号窗口取药',
    checkOrderNo: '20200101133',
    checkInfo: '请前往门诊三楼放射科进行检查',
    items: [
      { name: '葆宫止血颗粒', quantity: '3盒', price: 50.13 },
      { name: '维生素B1', quantity: '2瓶', price: 20.00 },
      { name: '维生素B2', quantity: '2瓶', price: 10.00 },
      { name: '维生素E', quantity: '2瓶', price: 10.00 },
      { name: '维生素C', quantity: '2瓶', price: 10.00 }
    ],
    examinations: [
      { name: 'CT', price: 200.00 },
      { name: '上腹部CT平扫', price: 220.00 }
    ],
    orderInfo: {
      orderNo: '2021010156256894',
      transactionId: '400012021010156256894',
      orderAmount: 520.13,
      orderStatus: '已支付',
      paymentMethod: '微信支付',
      orderTime: '2020-01-01 10:23:36',
      paymentTime: '2020-01-01 10:25:10'
    }
  }

  return (
    <div className={styles.container}>
      {/* Header */}
      <Nabar title='缴费订单详情' sticky={false} />

      {/* Payment Status */}
      <div className={styles.statusBar}>
        <div className={styles.statusIcon}>✓</div>
        <div className={styles.statusText}>已缴费</div>
      </div>

      {/* Barcode Section */}
      <div className={styles.barcodeCard}>
        <div className={styles.barcodeContainer}>
          <div>
            <img src={img} alt="" />
          </div>
          <div className={styles.barcodeNumber}>检查单号 ({paymentData.checkOrderNo})</div>
          <div className={styles.checkInstruction}>{paymentData.checkInfo}</div>
        </div>
      </div>

      {/* Payment Information */}
      <div className={styles.infoCard}>
        <div className={styles.cardTitle}>缴费信息</div>
        <div className={styles.infoList}>
          <div className={styles.infoItem}>
            <span className={styles.infoLabel}>登记号:</span>
            <span className={styles.infoValue}>{paymentData.registrationNo}</span>
          </div>
          <div className={styles.infoItem}>
            <span className={styles.infoLabel}>就诊人:</span>
            <span className={styles.infoValue}>{paymentData.patientName}</span>
          </div>
          <div className={styles.infoItem}>
            <span className={styles.infoLabel}>就诊科室:</span>
            <span className={styles.infoValue}>{paymentData.department}</span>
          </div>
          <div className={styles.infoItem}>
            <span className={styles.infoLabel}>开单医生:</span>
            <span className={styles.infoValue}>{paymentData.doctor}</span>
          </div>
          <div className={styles.infoItem}>
            <span className={styles.infoLabel}>开单时间:</span>
            <span className={styles.infoValue}>{paymentData.orderTime}</span>
          </div>
        </div>
      </div>

      {/* Cost Details */}
      <div className={styles.costCard}>
        <div className={styles.pharmacyBanner}>
          {paymentData.pharmacyInfo}
        </div>
        <div className={styles.prescriptionInfo}>
          <div className={styles.medicineIcon}>药</div>
          <div className={styles.prescriptionText}>处方号 ({paymentData.prescriptionNo})</div>
        </div>
        <div className={styles.itemsList}>
          {paymentData.items.map((item, index) => (
            <div key={index} className={styles.itemRow}>
              <div className={styles.itemNumber}>{index + 1}</div>
              <div className={styles.itemDetails}>
                <div className={styles.itemName}>{item.name}×{item.quantity}</div>
                <div className={styles.itemPrice}>¥ {item.price.toFixed(2)}</div>
              </div>
            </div>
          ))}
        </div>

        <div className={styles.examinationSection}>
          <div className={styles.prescriptionText}>检查单号 ({paymentData.prescriptionNo})</div>
          {paymentData.examinations.map((exam, index) => (
            <div key={index} className={styles.itemRow}>

              <div className={styles.itemNumber}>{paymentData.items.length + index + 1}</div>
              <div className={styles.itemDetails}>
                <div className={styles.itemName}>{exam.name}</div>
                <div className={styles.itemPrice}>¥ {exam.price.toFixed(2)}</div>
              </div>
            </div>
          ))}
        </div>

        <div className={styles.totalAmount}>
          合计: ¥{paymentData.totalAmount.toFixed(2)}
        </div>
      </div>

      {/* Order Information */}
      <div className={styles.orderCard}>
        <div className={styles.cardTitle}>订单信息</div>
        <div className={styles.orderInfoList}>
          <div className={styles.orderInfoItem}>
            <span className={styles.orderLabel}>订单号:</span>
            <div className={styles.orderValueContainer}>
              <span className={styles.orderValue}>{paymentData.orderInfo.orderNo}</span>
              <button className={styles.copyButton}>复制</button>
            </div>
          </div>
          <div className={styles.orderInfoItem}>
            <span className={styles.orderLabel}>订单流水号:</span>
            <span className={styles.orderValue}>{paymentData.orderInfo.transactionId}</span>
          </div>
          <div className={styles.orderInfoItem}>
            <span className={styles.orderLabel}>订单金额:</span>
            <span className={styles.orderValue}>¥{paymentData.orderInfo.orderAmount.toFixed(2)}</span>
          </div>
          <div className={styles.orderInfoItem}>
            <span className={styles.orderLabel}>订单状态:</span>
            <span className={styles.orderValue}>{paymentData.orderInfo.orderStatus}</span>
          </div>
          <div className={styles.orderInfoItem}>
            <span className={styles.orderLabel}>支付方式:</span>
            <span className={styles.orderValue}>{paymentData.orderInfo.paymentMethod}</span>
          </div>
          <div className={styles.orderInfoItem}>
            <span className={styles.orderLabel}>下单时间:</span>
            <span className={styles.orderValue}>{paymentData.orderInfo.orderTime}</span>
          </div>
          <div className={styles.orderInfoItem}>
            <span className={styles.orderLabel}>支付时间:</span>
            <span className={styles.orderValue}>{paymentData.orderInfo.paymentTime}</span>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Index
